import React, { Component } from 'react';
import Image from 'react-uwp/Image';
import { PAYSTATE as STATE, ACTIONSTATE as ACTION } from '../../utils/constant';
import NoData from '../common/NoData';
import { Table } from 'antd';
import moment from 'moment';
const Column = Table;
export default class Order extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    // const { getOrderList } = this.props;
    // getOrderList();
  }
  renderBaseInfo = (text, item) => {
    const { hideOrderno } = this.props;
    const { orderno, product } = item;
    const { title, imgs } = product;
    let subTitle = title;
    if (title.length > 36) {
      subTitle = title.substring(0, 35) + '...';
    }
    return (
      <a className="dfc">
        {hideOrderno ? null : (
          <p style={{ textAlign: 'left', marginBottom: '0.4rem' }}>
            订单编号:&nbsp;{item.orderno}
          </p>
        )}
        <div className="dfrsc">
          <div className="orderImg">
            <Image className="imgCover" src={imgs[0]} />
          </div>
          <div className="orderTitle" title={title}>
            {subTitle}
          </div>
        </div>
      </a>
    );
  };
  renderAction = (text, item) => {
    const { state } = item;
    const { action } = this.props;
    return (
      <div>
        <a
          className={
            state == ACTION[0].type || state == ACTION[1].type
              ? 'actionBtn'
              : 'aNormal'
          }
          onClick={() => action(item)}
        >
          {ACTION[state].actionValue}
        </a>
      </div>
    );
  };
  render() {
    const { loading, list, pagination, hidePrice } = this.props;
    return (
      <div>
        {loading || (list && list.length > 0) ? (
          <Table
            className="orderTable"
            loading={loading}
            dataSource={list}
            pagination={pagination}
          >
            <Column
              align="center"
              title="商品"
              dataIndex="baseInfo"
              key="baseInfo"
              render={(text, record) => this.renderBaseInfo(text, record)}
            />
            <Column
              align="center"
              title="联系人"
              width={100}
              dataIndex="customer"
              key="customer"
              render={customer => <p>{customer}</p>}
            />
            <Column
              align="center"
              title="使用日期"
              width={120}
              dataIndex="useTime"
              key="useTime"
              render={useTime => <p>{moment(useTime).format('YYYY-MM-D')}</p>}
            />
            {hidePrice ? null : (
              <Column
                align="center"
                title="订单金额"
                width={100}
                dataIndex="price"
                key="price"
                render={price => <p className="cred2">{`￥${price}`}</p>}
              />
            )}
            <Column
              align="center"
              title="订单状态"
              width={100}
              dataIndex="state"
              key="state"
              render={state => (
                <p
                  className={
                    state == ACTION[0].type || state == ACTION[1].type
                      ? 'cred2'
                      : ''
                  }
                >
                  {ACTION[state].text}
                </p>
              )}
            />
            <Column
              align="center"
              title="操作"
              width={120}
              dataIndex="action"
              key="action"
              render={(text, record) => this.renderAction(text, record)}
            />
          </Table>
        ) : (
          <div>
            <NoData iconClass="icon-nodata-search" text="暂无订单" />
          </div>
        )}
      </div>
    );
  }
}
